<!-- eslint-disable @typescript-eslint/no-use-before-define -->
<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px">
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-form class="w-full" size="small">
            <n-form-item label="计划投入日期:" label-placement="left">
              <n-date-picker
                v-model:value="range"
                type="daterange"
                clearable
                :default-time="['00:00:00', '00:00:00']"
              />
            </n-form-item>
          </n-form>
        </n-gi>
        <n-gi>
          <n-form class="w-full" size="small">
            <n-form-item label="" label-placement="left">
              <n-button type="primary" :on-click="getPlanAct">
                <template #icon><icon-mdi-map-search-outline /></template>
                查询
              </n-button>
            </n-form-item>
          </n-form>
        </n-gi>
      </n-grid>
      <n-space class="w-full"></n-space>
      <n-divider />
      <vxe-grid v-bind="dailyOptions" :cell-style="cellStyle" @cell-click="cellClickEvent"></vxe-grid>
      <n-modal v-model:show="showModal">
        <n-card style="width: 1280px" title="工单详情" :bordered="false" size="huge" role="dialog" aria-modal="true">
          <vxe-table
            border
            :column-config="{ resizable: true }"
            :tree-config="{ transform: true, rowField: 'lotname', parentField: 'parentlotname', accordion: true }"
            :data="parentLot.tableData"
          >
            <vxe-column field="lotname" title="工单号" width="200" tree-node></vxe-column>
            <vxe-column field="planqty" title="计划数量"></vxe-column>
            <vxe-column field="processoperationname" title="站点"></vxe-column>
            <vxe-column field="description" title="描述"></vxe-column>
            <vxe-column field="subproductokquantity" title="工单数量"></vxe-column>
          </vxe-table>
        </n-card>
      </n-modal>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import type { VxeGridProps, VxeTablePropTypes } from 'vxe-table';
import { fetchPlanActData, fetchLotDataByProductRequest } from '@/service/api';
// eslint-disable-next-line @typescript-eslint/no-unused-vars

const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);
const showModal = ref(false);
const countNum = (list: any[]) => {
  return `${list.length} 笔`;
};

const dailyOptions = reactive<VxeGridProps>({
  border: true,
  height: 600,
  showFooter: true,
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'createdwo',
      title: '创建工单',
      width: '120px',
      filters: [{ data: '' }],
      filterRender: { name: 'FilterInput' }
    },
    { field: 'planquantity', title: '计划数量', width: '90px' },
    { field: 'planreleasedtime', title: '计划投入', width: '100px' },
    { field: 'planfinishedtime', title: '计划产出', width: '100px' },
    {
      field: 'assignedareaname',
      title: '排产车间',
      width: '110px',
      filters: [{ data: '' }],
      filterRender: { name: 'FilterInput' }
    },
    { field: 'releasedquantity', title: '投入数量', width: '90px' },
    { field: 'finishedquantity', title: '产出数量', width: '90px' },
    {
      field: 'productrequeststate',
      title: '工单状态',
      width: '120px',
      filters: [{ data: '' }],
      filterRender: { name: 'FilterInput' }
    },
    // { field: 'releasedtime', title: '投入时间' },
    // { field: 'finishedtime', title: '产出时间' },
    {
      field: 'releasedwo',
      title: '投入工单',
      width: '120px',
      filters: [{ data: '' }],
      filterRender: { name: 'FilterInput' }
    },
    { field: 'r01time', title: '上片产出时间', width: '200px' },
    { field: 'r01qty', title: '上片产出数量', width: '120px' },
    { field: 'r08time', title: '封焊产出时间', width: '200px' },
    { field: 'r08qty', title: '封焊产出数量', width: '120px' },
    { field: 'r14time', title: '测试产出时间', width: '200px' },
    { field: 'r14qty', title: '测试产出数量', width: '120px' }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true
  },
  data: [],
  mergeCells: [],
  footerMethod({ columns, data }) {
    return [
      columns.map((_column, columnIndex) => {
        if (columnIndex === 0) {
          return 'Σ总计';
        }
        if (columnIndex === 1) {
          return countNum(data);
        }
        return '';
      })
    ];
  },
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getPlanAct = async () => {
  const result = await fetchPlanActData(
    dayjs(range.value[0]).format('YYYYMMDD'),
    dayjs(range.value[1]).format('YYYYMMDD')
  );
  if (result.data) {
    dailyOptions.data = result.data;
  }
};

const parentLot = reactive({
  tableData: []
});

const cellClickEvent = async ({ row }: { row: any }) => {
  if (row.releasedwo) {
    const result = await fetchLotDataByProductRequest(row.releasedwo);
    if (result.data) {
      parentLot.tableData = result.data as any;
    }
    showModal.value = true;
  }
};

const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
  if (column.field === 'createdwo') {
    if (row.releasedwo) {
      return {
        color: '#ffffff',
        backgroundColor: '#187'
      };
    }
    return {
      color: '#ffffff',
      backgroundColor: '#f13900'
    };
  }
  return null;
};
</script>

<style scoped></style>
